<template>
    <el-menu class="elMenuTwo" router unique-opened="true" :collapse="message">
        <el-sub-menu :index="item" v-for="item in navList" :key="item.titleName" v-show="navOneLiShow(item.sonList)">
            <template #title>
                <div class="menuTitleBox">
                    <el-button type="text" style="color: #000;" :icon="item.icon" />
                    <span>{{ item.titleName }}</span>
                </div>
            </template>
            <el-menu-item-group>
                <el-menu-item v-for="i in item.sonList" :index="i.router" :key="i.router" v-show="i.haveThis">{{ i.name }}</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
</template>
<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// navList数据格式
interface Item {
    name: string;
    router: string;
    haveThis: boolean;
}
const router = useRouter();
const props = defineProps({
    message: {
        type: Boolean,
        required: true
    }
});
const navOneLiShow = (item: Array<Item>) => {
    let show = false
    if (item.length == 0) {
        return show
    }
    for (let i = 0; i < item.length; i++) {
        if (item[i].haveThis == true) {
            show = true
        }
    }
    return show
}
const navList = ref([
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表商品列表商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
    {
        icon: "ShoppingTrolley", titleName: '商品管理',
        sonList: [
            { name: '商品列表', router: "/goods", haveThis: true },
        ],
    },
])
onMounted(() => { })
</script>
<style scoped lang='scss'>
// 左侧导航栏========================================
.elMenuTwo {
    height: 100%;
    overflow-y: auto;

    // flex: 0;
    .menuTitleBox {
      width: 120px;
    //   margin-left: -10px;
    }
}

.elMenuTwo {
    scrollbar-width: thin;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow: scroll;
}

// 隐藏滚动条start=========================================================================
.elMenuTwo::-webkit-scrollbar {
    width: 0.5rem;
    /* 自定义滚动条宽度 */
}

.elMenuTwo::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* 设置滚动条滑块背景色为透明 */
}

.elMenuTwo::-webkit-scrollbar-track {
    background-color: transparent;
    /* 设置滚动条轨道背景色为透明 */
}

// 隐藏滚动条end=========================================================================</style>